
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/weiui/weui.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/weiui/example.css" />
	
<title>报名</title>
</head>
<body ontouchstart>

	<div class="page__bd page__bd_spacing">
		<h1 class="page__title">香山之旅报名</h1>
		<article class="weui-article">
		<h2 class="title">香山简介</h2>
		<p>香山公园位于北京西郊，景区内主峰香炉峰俗称“鬼见愁”。园内文物古迹众多，有燕京八景之一的“西山晴雪”，
			集明清两代建筑风格的寺院“碧云寺”，国内仅存的木质贴金“五百罗汉”，
			迎接六世班禅的行宫“宗镜大昭之庙”，颇具江南特色的古雅庭院“见心斋”等.</p>
	 	<p>
			<img src="<%=request.getContextPath()%>/images/xianshan.jpeg" alt="">
		</p> 

		</article>
	</div>
	 <div class="weui-cells__title">报名表填写</div>
<form  enctype=" multipart/form-data" method="post" id="enrollForm" name="enrollForm">
	<div class="weui-cells weui-cells_form">
	
	    
	    <input class="weui-input"  type="hidden"  name="openid"  value="${openid }" />
	    <input class="weui-input"  type="hidden"   name="activeid"  value="1" />
	
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">姓名</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" name="name" placeholder="请输入真实姓名" />
			</div>
		</div>

		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">电话号码</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="number" name="telphone"
					pattern="[0-9]*" placeholder="请输入电话号码" />
			</div>
		</div>
		<div class="weui-cell weui-cell_select">
			<div class="weui-cell__bd">
				<select class="weui-select" id="sex" name="sex">
					<option selected="" value="0">性别选择</option>
					<option value="1">男</option>
					<option value="2">女</option>
				</select>
			</div>
		</div>

	</div>



	<!--上传图片-->
	<!-- 
	 <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
	<div class="weui-cells__title">上传一张你的生活照片</div>
	<div class="weui-cells weui-cells_form">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">

						<div class="weui-uploader__info">0/2</div>
					</div>
					<div class="weui-uploader__bd">
						<div class="weui-uploader__input-box">
							<input id="uploaderInput" class="weui-uploader__input"
								type="file" accept="image/*" multiple />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	 -->
	 
	 <div class="page__bd">
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
<div class="weui-cells__title">上传一张你的生活照片</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                    
                            <div class="weui-uploader__info">0/1</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                               <!--  <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                        
                                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                    <div class="weui-uploader__file-content">
                                        <i class="weui-icon-warn"></i>
                                    </div>
                                </li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                    <div class="weui-uploader__file-content">50%</div>
                                </li> -->
                             <!--    <li class="weui-uploader__file" style="background-image:url(blob:http://192.168.1.102:8080/35c6d83f-c6ef-47cc-8bbf-23ea50551495)"></li> -->
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" name="liftImage" accept="image/*" multiple />
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
</div>

	
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/zepto.min.js"></script>
	<div class="weui-btn-area">
		<a class="weui-btn weui-btn_primary " href="javascript:void(0);"
			id="register-btn">报名</a>
	</div>
</form> 


    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已提交等待审核</p>
        </div>
    </div>
    <!--end toast-->
    
   

    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">报名信息提交中...</p>
        </div>
    </div>



	
	<div class="page__ft">
		<a href="javascript:home()"><img
			src="<%=request.getContextPath()%>/images/icon_footer_link.png" /></a>
	</div>
	</div>

	<!-- 引入js -->
	<script type="text/javascript">
    $(function(){

        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
            	
                var file = files[i];
   
                var acceptedTypes = {
                	'image/png': true,
                	'image/jpeg': true,
                	'image/gif': true
                };
                if(acceptedTypes[file.type]===true){
                	 if (url) {
                         src = url.createObjectURL(file);
                     } else {
                         src = e.target.result;
                     }

                     $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
                 
            }
             
        });
        $uploaderFiles.on("click", "li", function(){
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });

    });
</script>




<script type="text/javascript">
		
	$(document).ready(function(){
    //提示
    $('#register-btn').removeAttr('onclick');
	var $loadingToast = $('#loadingToast');
    var $toast = $('#toast'); 	
    //路径
    var url="<%=request.getContextPath()%>/enroll";  
		
     //校验表单不能为空
     var check =  function(){
    	var activeid= $('input[name="activeid"]').val();
    	var openid= $('input[name="openid"]').val();
    	var sex= $('#sex').val();
    	var telphone= $('input[name="telphone"]').val();
    	var name= $('input[name="name"]').val();
    	var files=  $('input[name="liftImage"]').prop('files');
    	
    	console.log("activeid"+activeid+"openid"+openid+"sex"+sex+"name"+name+"telphone"+telphone+"file"+files.length);
    	 if(sex==0||activeid==''||telphone=='' ||name=='' || files.length==''){
    		return false;
    	 }else{
    		return true;
    	 }
    	 
    	
     }
		
     
     
     
     
     
	  
	  //点击报名
		$('#register-btn').on('click',function(e){
			var isNotEmpty=check();
			console.log(isNotEmpty);
			
			
			if(isNotEmpty){//表单都填写了
				  $loadingToast.fadeIn(100); //提示正在提交信息
					
					
					$("#enrollForm").submit(function(e){	
					    var formObj = $(this);
					    var formURL = url;/* formObj.attr("action"); */
					    var formData = new FormData(this);
					    console.log(formObj);
					    $.ajax({
					        url: formURL,
					    type: 'POST',
					        data:  formData,
					    mimeType:"multipart/form-data",
					    contentType: false,
					        cache: false,
					        processData:false,
					    success: function(data, textStatus, jqXHR){
					    	
					    	var response = $.parseJSON(data);
					    	console.log(response);
					    	$loadingToast.fadeOut(100);
					    	if(response.errorcode =="500"){
					    		console.log("失败");
					    		$('#toast .weui-toast__content').html(response.errormsg);
					    	}else{
					    		$('#toast .weui-toast__content').html("已提交等待审核");
					    		
					    	}
					    	 setTimeout(function () {
								 $toast.fadeIn(100);
					         }, 2000);
				            $toast.fadeIn(100);
				            setTimeout(function () {
				                $toast.fadeOut(100);
				            }, 2000);
				            
					    },
					     error: function(jqXHR, textStatus, errorThrown) 
					     {
					     }          
					    });
					    e.preventDefault(); //Prevent Default action. 
					    //e.unbind();
					}); 
					$("#enrollForm").submit(); //Submit the form
			}else{
				$('#toast .weui-toast__content').html("报名表必须填完");
				 setTimeout(function () {
					 $toast.fadeIn(100);
		         }, 2000);
	            $toast.fadeIn(100);
	            setTimeout(function () {
	                $toast.fadeOut(100);
	            }, 2000);
	     
			} 
			
		  
	
			
		}); 
   	});
</script>
	

</body>
</html>